<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib  uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/resource/css/bootstrap.min.css" />
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<link href="./resource/bootstrap-treeview/css/bootstrap-treeview.css" rel="stylesheet">
<script src="./resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>
</head>
<body>
	<div class="container-fluid">
		<form action="add" id="form">
			<div class="form-group row">
			<input type="hidden" class="form-control" id="spuId" name="id" value="${spu.id}">
				<label for="goodsName" class="col-sm-2 col-form-label">名称</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="goodsName"
						name="goodsName" value="${spu.goodsName}">
				</div>
			</div>
			<!-- <div class="form-group row">
				<label for="categoryId" class="col-sm-2 col-form-label">分类</label>
				<div class="col-sm-4">
					<input type="button" class="form-control" id="categoryId"
						name="categoryId" onclick="selectCat()">
				</div>
			</div> -->
			
			<div class="form-group row">
		    <label for="goodsName" class="col-sm-2 col-form-label">分类</label>
		    <div class="col-sm-4">
		    	<input type="hidden" name="categoryId" id="categoryId">
		      <input type="button" id="catName" class="form-control" onclick="seleCategory()">
		    </div>
		 </div>
		  <div class="form-group row" >
		   <div class="col-sm-10" id="catTree" style="display:none ;position: absolute; z-index: 1000;width: 90%" >
		   </div>
		 </div> 
			
			
			 <div class="form-group row" >
				<div id="tree" class="col-sm-4 style="display:none;position:absoulte;z-index:1000;width:90%"></div>
				
			</div> 
			<div class="form-group row">
		 	<label for="isMarketable" class="col-sm-2 col-form-label">上架</label>
		   <select name="isMarketable" id="isMarketable">
		   	 <option value="1" ${spu.isMarketable==1?"checked":""}>在售</option>
		   	 <option value="0" ${spu.isMarketable==0?"checked":""}>下架</option>
		   </select>	 
		 </div>
			
			<div class="form-group row">
				<label for="caption" class="col-sm-2 col-form-label">标题</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="caption"
						name="caption" value="${spu.caption}">
				</div>
			</div>
			<div class="form-group row">
				<label for="brandId" class="col-sm-2 col-form-label">品牌</label>
				<div class="col-sm-4">
					<select name="brandId">
						<option value="0">==请选择==</option>
					<c:forEach items="${list}" var="brand">
						<option value="${brand.id}" ${spu.brandId==brand.id}?"selected":"">${brand.name}</option>
					</c:forEach>
					</select>
					
				</div>
			</div>
			<div class="form-group row">
				<label for="file" class="col-sm-2 col-form-label">图片</label>
				<div class="col-sm-4">
					<input type="file" class="form-control" id="file"
						name="myfile">
				</div>
			</div>
			<div class="form-group row">
				<button type="button" class="btn btn-primary btn-sm"  onclick="add()">添加</button>
			</div>
			</form>
			</div>
	
</body>
<script type="text/javascript">
function seleCategory(){
	$("#catTree").show()
}
	function initTree(){
		$.post('./cat/data',{},function(data){
			$('#catTree').treeview({
				  data: data,         // data is not optional
				  levels: 2,
				  onNodeSelected: function(event, data) {
					  if(data.nodes.length==0){
						  $("#catName").val(data.text)
						  $("#categoryId").val(data.id)
						  $("#catTree").hide()
					  }
				  }
				});
		})
	
	}	
	
	//初始化树状图
	initTree();
	function add(){
		var formData=new FormData($("#form")[0]);
		$.ajax({
				url:"./spu/update",
				data:formData,
				type:"post",
				contentType:false,
				processData:false,
				success:function(data){
					if(data=='ok'){
						alert("修改成功");
						$("#workContent").load('./spu/list');
					}else{
						alert("修改失败");
					}
				}
			
			   
		})
	}
</script>
</html>